/*
 * @description: 店铺公告
 * @Author: --
 * @Date: --
 * @Last Modified by: --
 * @Last Modified time: --
 */
<template>
    <div class="shopPublic">
        <div class="public-title">
            店铺公告
        </div>
        <div class="public">
            <div class="public-nav">
                <p class="public-content">
                    当前店铺公告信息
                </p>
                <p class="public-desc">
                    (正在展示的公告信息)
                </p>
                <p
                    class="public-remove"
                    v-if="fromData.content"
                    @click="public_delete = !public_delete"
                >
                    删除当前店铺公告信息
                </p>
            </div>
            <template>
                <p
                    v-if="!fromData.content || (!fromData.content && fromData.verify == 1)"
                    class="public-none"
                >
                    当前暂无店铺公告信息
                </p>
                <p
                    v-if="fromData.content"
                    class="public-view"
                >
                    {{ fromData.content }}
                </p>
            </template>
            <div
                class="public-nav"
                :style="{width: '540px', display: 'flex', justifyContent: 'space-between'}"
            >
                <div class="public-nav-left">
                    <p class="public-content">
                        店铺公告信息
                    </p>
                    <p class="public-desc">
                        该公告信息会显示在店铺首页和商品详情页
                    </p>
                </div>
                <p
                    class="public-nav-right"
                    v-if="fromData.verify === 0"
                    :style="{color: 'rgba(255, 175, 57, 1)'}"
                >
                    审核状态: 待审核
                </p>
                <p
                    class="public-nav-right"
                    v-if="fromData.verify === -1"
                    :style="{color: 'rgba(238, 78, 89, 1)'}"
                >
                    审核状态: 审核不通过
                </p>
                <!-- <p
                    class="public-nav-right"
                    v-if="fromData.verify === 1"
                    :style="{color: '#4CD964'}"
                >
                    审核状态: 审核通过
                </p> -->
            </div>
            <div
                @click="handleTextarea()"
                :style="{width: '540px'}"
            >
                <el-input
                    type="textarea"
                    placeholder="请输入店铺公告信息"
                    v-model="public_conetnt"
                    maxlength="100"
                    show-word-limit
                    ref="public_focus"
                    :autosize="{ minRows: 3.5, maxRows: 8}"
                    class="public-textarea"
                    :disabled="fromData.verify === 0 || (fromData.verify === -1 && is_edit_public)"
                />
                <p
                    v-if="fromData.verify == -1 && fromData.verify_fail_reason"
                    :style="{fontSize: '14px', color: 'rgba(238, 78, 89, 1)', margin: '20px 0'}"
                >
                    驳回原因:{{ fromData.verify_fail_reason }}
                </p>
            </div>
            <div class="public-operation">
                <el-button
                    v-if="!(fromData.verify === 0 || fromData.verify === -1) || !is_edit_public"
                    size="medium"
                    type="primary"
                    :disabled="!public_conetnt"
                    :style="{width: '120px', marginRight: '25px'}"
                    @click="public_submit = !public_submit"
                >
                    提交
                </el-button>
                <el-button
                    v-if="fromData.verify === 0"
                    size="medium"
                    type="primary"
                    :style="{width: '120px', marginRight: '25px'}"
                    @click="public_cancel = !public_cancel"
                >
                    撤回
                </el-button>
                <el-button
                    v-if="fromData.verify === -1 && is_edit_public"
                    size="medium"
                    type="primary"
                    :style="{width: '120px', marginRight: '25px'}"
                    @click="editPublic()"
                >
                    修改
                </el-button>
                <el-tooltip
                    v-if="!public_conetnt"
                    class="item"
                    effect="dark"
                    content="您还未输入内容暂不可预览哦～"
                    placement="bottom-start"
                    popper-class="public-popper"
                >
                    <el-button
                        v-if="!public_conetnt"
                        size="medium"
                        type="primary"
                        plain
                        :style="{width: '120px', opacity: .6}"
                        @click="previewPublic()"
                    >
                        预览效果
                    </el-button>
                </el-tooltip>
                <el-button
                    v-if="public_conetnt"
                    size="medium"
                    type="primary"
                    plain
                    :style="{width: '120px', opacity: 1}"
                    @click="previewPublic()"
                >
                    预览效果
                </el-button>
            </div>
        </div>

        <!-- 离开弹窗 -->
        <dialog-public
            :dialog="public_dialog"
            :title="''"
            :center="true"
            :width="360"
        >
            <div class="public_dialog">
                <img
                    src="@/assets/image/waring.png"
                    class="public_logo"
                >
                <p class="public_text">
                    您编辑的内容还没有保存哦，确定离开吗？
                </p>
                <div class="public_foot">
                    <el-button
                        size="small"
                        type="default"
                        :style="{marginRight: '32px', width: '80px'}"
                        @click="public_dialog = false"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        :style="{width: '80px'}"
                        @click="nextPage()"
                    >
                        确认
                    </el-button>
                </div>
            </div>
        </dialog-public>

        <!-- 预览公告 -->
        <public-preview
            class="publicPreview"
            ref="publicPreview"
            :public-content="public_conetnt"
        />

        <!-- 删除弹窗 -->
        <delete-public
            :dialog="public_delete"
            :title="''"
            :center="true"
            :width="360"
        >
            <div class="public_dialog">
                <img
                    src="@/assets/image/waring.png"
                    class="public_logo"
                >
                <p class="public_title">
                    提示
                </p>
                <p class="public_text">
                    是否确认删除当前的店铺公告信息？
                </p>
                <div class="public_foot">
                    <el-button
                        size="small"
                        type="default"
                        :style="{marginRight: '32px', width: '80px'}"
                        @click="public_delete = false"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        :style="{width: '80px'}"
                        @click="confirmDelete()"
                    >
                        确认
                    </el-button>
                </div>
            </div>
        </delete-public>

        <!-- 提交弹窗 -->
        <submit-public
            :dialog="public_submit"
            :title="''"
            :center="true"
            :width="360"
        >
            <div class="public_dialog">
                <img
                    src="@/assets/image/waring.png"
                    class="public_logo"
                >
                <p class="public_title">
                    提示
                </p>
                <p class="public_text">
                    是否确认提店铺公告信息？
                </p>
                <div class="public_foot">
                    <el-button
                        size="small"
                        type="default"
                        :style="{marginRight: '32px', width: '80px'}"
                        @click="public_submit = false"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        :style="{width: '80px'}"
                        @click="savePublic()"
                    >
                        确认
                    </el-button>
                </div>
            </div>
        </submit-public>

        <!-- 撤回弹窗 -->
        <withdraw-public
            :dialog="public_cancel"
            :title="''"
            :center="true"
            :width="360"
        >
            <div class="public_dialog">
                <img
                    src="@/assets/image/waring.png"
                    class="public_logo"
                >
                <p class="public_title">
                    提示
                </p>
                <p class="public_text">
                    店铺公告信息已经提交审核,是否确认撤回？
                </p>
                <div class="public_foot">
                    <el-button
                        size="small"
                        type="default"
                        :style="{marginRight: '32px', width: '80px'}"
                        @click="public_cancel = false"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        :style="{width: '80px'}"
                        @click="cancelPublic()"
                    >
                        确认
                    </el-button>
                </div>
            </div>
        </withdraw-public>
    </div>
</template>

<script>
import dialogPublic from '@/components/manage/market/dialog.vue';
import deletePublic from '@/components/manage/market/dialog.vue';
import submitPublic from '@/components/manage/market/dialog.vue';
import withdrawPublic from '@/components/manage/market/dialog.vue';
import publicPreview from '@/components/manage/market/public-preview.vue';
export default {
    components: {
        dialogPublic,
        publicPreview,
        deletePublic,
        submitPublic,
        withdrawPublic
    },
    filters: {
    },
    computed: {
    },
    data() {
        return {
            public_conetnt: '',//公告内容
            public_dialog: false,
            public_delete: false,
            public_submit: false,
            public_cancel: false,
            is_edit_public: true,//审核失败是否可以编辑内容 true: 不可以  false:可以
            next: null,
            fromData: {}
        };
    },
    watch: {
    },
    mounted() {
        if(process.client){
            this.init();
        }
    },
    beforeRouteLeave(to, from, next) {
        // if(this.public_status == 1) {
        //     this.public_dialog = true;
        //     this.next = next;
        //     next(false);
        // } else {
        //     next(true);
        // }
        next(true);
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.$store.commit('theme/SET_BREAD', [{title: '店铺设置'},{title: '店铺公告'}]);
            this.getData();
        },

        /**
         * @description 获取公告数据
         */
        getData () {
            this.$post('/ShopAnnounce/get',{}, resp=>{
                if(resp.code == 1) {
                    this.public_conetnt = resp.data.content_submit || '';
                    this.fromData = {
                        ...resp.data
                    };
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提交公告
         */
        savePublic () {
            this.$post('/ShopAnnounce/submitVerify',{
                content: this.public_conetnt
            }, resp=>{
                if(resp.code == 1) {
                    this.is_edit_public = true;//审核不通过使用
                    this.public_submit = !this.public_submit;
                    this.getData();
                    this.$notify({
                        title: '成功',
                        message: '提交成功',
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 撤回公告
         */
        cancelPublic () {
            this.$post('/ShopAnnounce/repealVerify',{},resp=> {
                if(resp.code == 1) {
                    this.getData();
                    this.public_cancel = !this.public_cancel;
                    this.$notify({
                        title: '成功',
                        message: '操作成功',
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 删除店铺公告
         */
        confirmDelete () {
            this.$post('/ShopAnnounce/clearAnnounce',{}, resp=>{
                if(resp.code == 1) {
                    this.public_delete = !this.public_delete;
                    this.getData();
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 编辑公告
         */
        editPublic () {
            this.is_edit_public = false;
            this.$nextTick(() => {
                this.$refs.public_focus.focus();
            });
        },

        /**
         * @description 点击输入框
         */
        handleTextarea () {
            if(this.fromData.verify === 0) {
                this.$notify({
                    title: '警告',
                    message: '待审核状态下不支持编辑',
                    type: 'warning'
                });
                return false;
            }
            if(this.fromData.verify === -1 && this.is_edit_public) {
                this.$notify({
                    title: '警告',
                    message: '请点击修改按钮编辑公告内容',
                    type: 'warning'
                });
                return false;
            }
        },

        /**
         * @description 预览效果
         */
        previewPublic () {
            if(this.public_conetnt == '') {
                this.$notify({
                    title: '警告',
                    message: '请先设置店铺公告信息',
                    type: 'warning'
                });
                return false;
            }

            this.$refs.publicPreview.show();
        },

        /**
         * @description 离开页面
         */
        nextPage () {
            this.next();
        }
    },
};
</script>

<style lang="less" scoped>
.shopPublic {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    .public-title {
        color: rgba(51, 51, 51, 1);
        font-size: 20px;
        height: 64px;
        padding-top: 24px;
        padding-left: 24px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        font-weight: 500;
    }
    .public {
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 24px 32px;
        .public-nav {
            height: 17px;
            display: flex;
            align-items: center;
            .public-nav-left {
                display: flex;
                height: 17px;
                align-items: center;
            }
            .public-content {
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
                font-weight: 500;
                margin-right: 12px;
            }
            .public-desc {
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
            }
            .public-remove {
                color: rgba(24, 144, 255, 1);
                font-size: 14px;
                cursor: pointer;
                margin-left: 24px;
            }
            .public-nav-right {
                height: 17px;
                line-height: 17px;
                display: flex;
                align-items: center;
            }
        }
        .public-none {
            color: rgba(255, 175, 57, 1);
            font-size: 14px;
            margin: 24px 0 56px 24px;
        }
        .public-view {
            width: 800px;
            padding: 20px 24px;
            box-sizing: border-box;
            margin: 24px 0 56px 24px;
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            line-height: 20px;
            background: #FAFAFA;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
        }
        .public-textarea {
            width: 540px;
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            margin-top: 24px;
            box-sizing: border-box;
        }
        .public-operation {
            display: flex;
            height: 36px;
            align-items: center;
            margin-top: 24px;
        }
    }

    .public_dialog {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .public_logo {
            width: 48px;
            height: 48px;
            margin-bottom: 20px;
        }
        .public_title {
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 24px;
        }
        .public_text {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            white-space: nowrap;
        }
        .public_foot {
            height: 32px;
            display: flex;
            width: 100%;
            justify-content: center;
            margin-top: 24px;
        }
    }
}
</style>

<style lang="less">
.shopPublic {
    .el-textarea__inner {
        font-size: 14px;
        line-height: 34px;
    }
    .is-plain {
        border-color: rgba(32, 160, 255, 1);
        background: #ffffff;
        color: rgba(32, 160, 255, 1);
    }
    .public-edit .el-textarea__inner {
        background: rgba(250, 250, 250, 1) !important;
    }
    .el-dialog__body {
        padding-top: 1px;
    }
    ._preview_wrap {
        .el-dialog__body {
            padding-left: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
        }
    }
    .publicPreview {
        .el-dialog__header {
            padding-top: 10px;
            box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;
            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }
            .el-icon-close:before {
                color: rgb(194,194,194);
                font-size: 17px;
                font-weight: bold;
            }
            .el-dialog__headerbtn {
                top: 14px;
            }
        }
    }
}
.public-popper {
    padding: 12px 15px;
}
</style>